<template>
    <div>
        <DataList :datalisttitle="null"></DataList>
        <el-table :data="state" border style="width: 100%">
            <el-table-column align="center" prop="id" label="编号" />
            <el-table-column align="center" prop="name" label="秒杀时间段名称" />
            <el-table-column align="center" label="每日开始时间">
                <template #default="scoped">
                    {{ scoped.row.startTime
                        ? dayjs(scoped.row.startTime).format("YYYY-MM-DD HH:mm:ss")
                        : '' }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="每日结束时间">
                <template #default="scoped">
                    {{
                        scoped.row.endTime
                        ? dayjs(scoped.row.endTime).format("YYYY-MM-DD HH:mm:ss")
                        : '' }}
                </template>
            </el-table-column>
            <el-table-column v-if="numOrBoo == 0" align="center" prop="productCount" label="商品数量" />
            <el-table-column v-if="numOrBoo == 1" align="center" prop="status" label="是否开启">
                <template #default="scoped">
                    <el-switch :value="scoped.row.status == 1" />
                </template>
            </el-table-column>
            <el-table-column v-if="numOrBoo == 0" align="center" prop="id" label="操作">
                <template #default="scoped">
                    <button class="btn">商品列表</button>
                </template>
            </el-table-column>
            <el-table-column v-if="numOrBoo == 1" align="center" prop="id" label="操作">
                <template #default="scoped">
                    <button class="btn">编辑</button>
                    <button class="btn" @click="open(scoped.row.id)">删除</button>
                </template>
            </el-table-column>
        </el-table>
        <el-button text></el-button>
    </div>
</template>

<script lang="ts" setup>
import DataList from './_s_DataList.vue';
import { defineProps,defineEmits } from 'vue'
import * as dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
let props = defineProps<{
    state: Array<any>
    numOrBoo: number  // 0 代表商品数量 1代表开关
}>()
let emits = defineEmits<{
    (del:"del",e)
}>()
const open = (e) => {
    ElMessageBox.confirm(
        '确认要删除这条内容吗',
        '确认框',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 这里进行数据的回传 e
            emits('del',e)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })
}
</script>
 
<style lang="scss" scoped>
.btn {
    color: rgb(64, 158, 255);
    border: none;
    background-color: transparent;
    cursor: pointer;
}
</style>